<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
        />
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
        <title>登录</title>
        <link rel="stylesheet" type="text/css" href="../css/aui.css" />
        <script type="text/javascript" src="../script/api.js"></script>
        <script src="../script/jquery.js"></script>
        <script src="../CommonTool/commonNetWork.js"></script>
        <style>
            body {
                /* background-color: #03a9f4; */
                background-color: #03a9f4;
            }

            #frm-container {
                margin: 0 auto;
                margin-top: 3vw;
                width: 83%;
                border-radius: 5vw;
                border: 0.5vw solid white;
                padding: 1.5vw 2.5vw;
                background: white;
            }

            #footer {
                background: none;
                position: absolute;
                bottom: 1.2rem;
            }
        </style>
    </head>

    <body>
        <div id="frm-container" class="aui-content-padded">
            <header class="aui-bar aui-bar-nav">
                <div class="aui-tab">
                    <div class="aui-tab-item tapmode aui-active" id="sign_in_pass">账号密码登录</div>
                </div>
            </header>
            <section class="aui-content aui-margin-t-0" id="sign_in_pass_content">
                <ul class="aui-list aui-form-list">
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label-icon">
                                <i class="aui-iconfont aui-icon-my"></i>
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" placeholder="请输入账号" id="login_usercode" />
                            </div>

                            <button style="position: absolute; right: 5px; top: 5px" onclick="showAccountList()">
                                选择
                            </button>
                        </div>
                    </li>
                    <li class="aui-list-item">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label-icon">
                                <i class="aui-iconfont aui-icon-lock"></i>
                            </div>
                            <div class="aui-list-item-input">
                                <input type="password" placeholder="请输入密码" id="login_password" value="" />
                            </div>
                        </div>
                    </li>
                </ul>

                <div class="aui-margin-t-10">
                    <label
                        ><input
                            id="remember_pass"
                            class="aui-checkbox aui-pull-left aui-margin-r-5"
                            checked
                            type="checkbox"
                            name="checkbox"
                        />
                        记住密码
                    </label>
                    <a class="aui-pull-right" href="#" onclick="ResetPassword()">重置密码</a>
                </div>
            </section>

            <section class="aui-content aui-margin-t-0">
                <div class="aui-btn aui-btn-block aui-btn-info aui-btn-sm" tapmode onclick="UserLogin()">登录</div>
                <!-- <div class="aui-btn aui-btn-block aui-btn-info aui-btn-sm" tapmode onclick="on_sign_in();"> 登录 </div> -->
                <div class="aui-content-padded aui-hide" style="text-align: center" id="waiting_gif">
                    <img src="../image/loading_more.gif" style="width: 5vw; height: 5vw" class="aui-inline" />
                </div>
            </section>

            <section class="aui-content aui-margin-t-0">
                <!-- <div id="user_register" class="aui-text-center" tapmode><a href="#" onclick="show_sign_up_form();">用户注册</a> -->
                <div id="user_register" class="aui-text-center" tapmode>
                    <a href="#" onclick="Register()">用户注册</a>
                </div>
            </section>
        </div>
    </body>
    <script type="text/javascript">
        apiready = function () {
            api.setScreenOrientation({
                orientation: "landscape_left",
            });
        };
        function showAccountList() {
            var accounts = $api.getStorage("userAccounts");
            if (accounts === undefined) {
                alert("暂无已保存的账号");
                return;
            }
            console.log(JSON.stringify(accounts));

            var accountList = accounts
                .map(function (item, index) {
                    return index + 1 + "、" + item.username;
                })
                .join("\n");

            var inputIndex = prompt("选择账号:\n" + accountList + "\n请输入序号");

            var selIndex = parseInt(inputIndex) - 1;

            if (!isNaN(selIndex) && accounts[selIndex]) {
                document.getElementById("login_usercode").value = accounts[selIndex].username;
                document.getElementById("login_password").value = accounts[selIndex].password;
            }
        }
        function ResetPassword() {
            api.openWin({
                name: "ResetPassword",
                url: "./ResetPassword.html",
            });
        }
        function Register() {
            api.openWin({
                name: "register",
                url: "./register.html",
                slidBackEnabled: true,
                slidBackType: "edge",
                pageParam: {
                    name: "register",
                },
                reload: true,
            });
        }
        function UserLogin() {
            // 不加请求直接放开这四行
            // api.openWin({
            //     name: "MainMenu",
            //     url: "./MainMenu.html",
            //     reload: true,
            // });

            var username = document.getElementById("login_usercode").value;
            var password = document.getElementById("login_password").value;
            // // // 请求后端用下面的代码
            $.ajax({
                url: CommonUrl + "/sys/login",
                method: "post",
                dataType: "json",
                contentType: "application/json",
                // contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
                data: JSON.stringify({
                    code: username,
                    password: password,
                }),
                success: function (data) {
                    if (data.code == 0) {
                        alert("登录失败");
                        return;
                    }
                    // 先获取现有的账号列表
                    var accounts = $api.getStorage("userAccounts");
                    console.log(JSON.stringify(accounts));
                    if (accounts === undefined) {
                        accounts = [];
                    }

                    // 检查当前用户名是否已存在
                    var exist = accounts.find(function (item) {
                        return item.username === username;
                    });

                    if (!exist) {
                        // 如果不存在，添加
                        accounts.push({ username: username, password: password });
                    } else {
                        // 如果存在，更新密码
                        exist.password = password;
                    }

                    // 保存更新后的列表
                    console.log(JSON.stringify(accounts));

                    $api.setStorage("userAccounts", accounts);
                    api.openWin({
                        name: "MainMenu",
                        url: "./MainMenu.html",
                        pageParam: {
                            uid: JSON.parse(JSON.stringify(data.data.userinfo.code)),
                            sname: JSON.parse(JSON.stringify(data.data.userinfo.sname)),
                            token: JSON.parse(JSON.stringify(data.data.token)),
                            keyid:JSON.parse(JSON.stringify(data.data.userinfo.id)),
                            avatarUrl:JSON.parse(JSON.stringify(data.data.userinfo.imageUrl)),
                        },
                        reload: true,
                    });
                },
                error: function (error) {
                    alert("登录失败");
                },
            });
        }
    </script>
</html>
